<template>
	<div class="boxStyle">
		<el-row type="flex" class="row-bg" justify="start" style="margin-bottom: 10px;">
			<el-col :span="1" style="margin-top: 5px;">订单编号:</el-col>
			<el-col :span="2" style="margin-right: 10px;">
				<el-input v-model="orderId" size="small"></el-input>
			</el-col>
			<el-col :span="1" style="margin-top: 5px;">卡券名称:</el-col>
			<el-col :span="2" style="margin-right: 10px;">
				<el-input v-model="goodsName" size="small"></el-input>
			</el-col>
			<el-col :span="2" style="margin-top: 5px;margin-right:18px;margin-left:18px;">所属渠道商 :</el-col>
			<el-col :span="2" style="margin-left: -55px">
				<el-select v-model="ChannelId" placeholder="请选择" size="small">
					<el-option value="" label="全部"></el-option>
					<el-option v-for="item in chanList" :key="item.id" :label="item.name" :value="item.id">
					</el-option>
				</el-select>
			</el-col>
			<el-col :span="3" style="margin-top: 5px;margin-left:18px;">平台抽成方式 :</el-col>
			<el-col :span="2" style="margin-left: -55px">
				<el-select v-model="cType" placeholder="请选择" size="small">
					<el-option value="" label="全部"></el-option>
					<el-option value="0" label="无"></el-option>
					<el-option value="1" label="固定抽成"></el-option>
					<el-option value="2" label="比例抽成"></el-option>
				</el-select>
			</el-col>
			</el-row>
			<el-row type="flex" class="row-bg" justify="start" style="margin-bottom: 10px;">
			<el-col :span="1" style="margin-top: 5px;padding-left: 5px;">付款时间:</el-col>
			<el-col :span="6" style="margin-top: -3px;" id="com_date">
				<el-date-picker v-model="stime" type="datetimerange" range-separator="至 " start-placeholder="开始时间" end-placeholder="结束时间"></el-date-picker>
			</el-col>
			
			<el-col :span="1" style="margin-right:20px;margin-left: 50px;">
				<el-button type="warning" icon="el-icon-search" size="small" @click="search">查找</el-button>
			</el-col>
		</el-row>
		<el-table :data="tableData" border style="width:100%;margin-bottom: 10px;">
			<el-table-column type="selection" width="50"></el-table-column>
			<el-table-column prop="orderId" label="订单编号" width="200"></el-table-column>
			<el-table-column prop="goodsName" label="卡券名称" width="150"></el-table-column>
			<el-table-column prop="name" label="所属渠道商"></el-table-column>
			<el-table-column label="付款时间" prop="payTime" width="160" :formatter="dateFormat"></el-table-column>
			<el-table-column prop="cType" label="平台抽成方式" width="120">
				<template slot-scope="scope">
					<span v-if="scope.row.cType==0">无</span>
					<span v-if="scope.row.cType==1">固定抽成</span>
					<span v-if="scope.row.cType==2">比例抽成</span>
				</template>
			</el-table-column>
			<el-table-column prop="orderPrice" label="订单金额" width="90"></el-table-column>
			<el-table-column prop="extractingPrice" label="抽成金额" width="90"></el-table-column>
			<el-table-column prop="channelPrice" label="支付渠道商金额" width="160"></el-table-column>
			<el-table-column prop="remainingPrice" label="结算余额" width="160"></el-table-column>
			<el-table-column prop="disPrice" label="分销佣金"></el-table-column>
		</el-table>
		<el-pagination background @current-change="handleCurrentChange" :current-page="currentPage" :page-size="size" layout="prev, pager, next,total, slot" :total="totals">
			<span style="margin-top: -2px;color: #606266;font-weight: 100;">第<el-input type="text" v-model="inputPage" style="width: 60px;margin: 0 5px;"/>页<el-button size="mini" style="background: #409EFF; color: #fff;margin:0 5px;" @click="handleCurrentChange(inputPage)">跳转</el-button><span>总计{{totalPage}}页</span></span>
		</el-pagination>
	</div>
</template>

<script>
	import { formatDate } from 'static/js/date.js'
	import qs from "qs"
	import axios from "axios"
	export default {
		data() {
			return {
				orderId: "",
				goodsName: "",
				cType: "",
				tableData: [],
				inputPage: 1,
				totalPage: 1,
				currentPage: 1,
				totals: 0, //分页总条数
				size: 0, //每页条数
				purl: this.$store.state.purl, //权限数组
				stime: '', //开始时间
				ChannelId: '',
				chanList: [],
			}
		},
		activated() {
			this.orderId = "";
			this.goodsName = "";
			this.code = "";
			this.cType = "";
			this.stime = "";
			this.ChannelId = '';
			this.currentPage = 1;
			this.load(1);
			this.tableData = [];
		},
		methods: {
			dateFormat(row, column) {
				var date
				if(row[column.property]) {
					date = new Date(parseInt(row[column.property]))
					date = formatDate(date, 'yyyy-MM-dd hh:mm:ss')
				}
				if(date == undefined) {
					return "";
				}
				return date;
			},
			load(num) {
				axios.get("/interface/channelCount/list?pageNo=" + num).then((res) => {
					this.tableData = res.data.data.list; //list数据
					this.totals = res.data.data.pageBean.totalRow; //总条数
					this.size = res.data.data.pageBean.pageSize; //每页条数
					this.totalPage = res.data.data.pageBean.totalPage; //总页数
					this.chanList = res.data.data.cList;
				})
			},
			handleCurrentChange(val) {
				this.currentPage = val - 0;
				this.inputPage = val;
				var startTime
				var endTime
				if(this.stime != null && this.stime.length > 0) {
					startTime = formatDate(this.stime[0], 'yyyy-MM-dd hh:mm:ss');
					endTime = formatDate(this.stime[1], 'yyyy-MM-dd hh:mm:ss');
				} else {
					startTime = "";
					endTime = "";
				}
				axios.post("/interface/channelCount/list?", qs.stringify({
					stime: startTime,
					etime: endTime,
					orderId: this.orderId,
					goodsName: this.goodsName,
					ChannelId:this.ChannelId,
					cType: this.cType,
					pageNo: val
				})).then((res) => {
					this.tableData = res.data.data.list; //list数据
					this.totals = res.data.data.pageBean.totalRow; //总条数
					this.size = res.data.data.pageBean.pageSize; //每页条数
					this.totalPage = res.data.data.pageBean.totalPage; //总页数
				})
			},
			search() {
				var startTime;
				var endTime;
				if(this.stime != null && this.stime.length > 0) {
					startTime = formatDate(this.stime[0], 'yyyy-MM-dd hh:mm:ss');
					endTime = formatDate(this.stime[1], 'yyyy-MM-dd hh:mm:ss');
				} else {
					startTime = "";
					endTime = "";
				}
				axios.post("/interface/channelCount/list?", qs.stringify({
					stime: startTime,
					etime: endTime,
					orderId: this.orderId,
					goodsName: this.goodsName,
					ChannelId:this.ChannelId,
					cType: this.cType,
					pageNo: 1
				})).then((res) => {
					if(res.data.code == 1) {
						this.tableData = res.data.data.list; //list数据
						this.totals = res.data.data.pageBean.totalRow; //总条数
						this.size = res.data.data.pageBean.pageSize; //每页条数 
						this.totalPage = res.data.data.pageBean.totalPage; //总页数
					} else {
						this.$message.error(res.data.msg)
					}
				})
			},
			exc() {},
		}
	}
</script>
<style>
	#reMoney .el-form-item__label {
		width: 140px !important;
	}
	
	#reMoney .el-form-item__content {
		margin-left: 140px !important;
	}
	
	.el-notification {
		z-index: 10056 !important;
	}
</style>